<template>
  <div class="aa" :style="{'width':clienWidth}">
    <div class="painter-name_box" ref="a1">
       <span v-for="(it,index) in list" class="tag_patientName gh_active_name"  :class="{'gh_active_name':status==2}" :key="index">
        {{it.sourceCode}} {{it.patientName | changePaintName}}
        <label v-if="index!==(list.length-1)">、</label>
        <label v-if="list.length>2 && index==(list.length-1)">、</label>
      </span>
    </div>
    <div v-show="list.length>2" ref="a2" class="painter-name_box">
       <span v-for="(it,index) in list" class="tag_patientName gh_active_name" :class="{'gh_active_name':status==2}" :key="index">
        {{it.sourceCode}} {{it.patientName | changePaintName}}
        <label v-if="index!==(list.length-1)">、</label>
        <label v-if="list.length>2 && index==(list.length-1)">、</label>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  props:["list","name","status"],
  data(){
      return{
          timer:null,
          clienWidth:"",
          flog:0,
          overFlog:0,
      }
  },
  mounted() {
    let th = this;
    let html1 = th.$refs["a1"];
    let html2 = th.$refs["a2"];
    // html2.innerHTML = html1.innerHTML;
    let w = th.$el.scrollLeft;
    let ww = th.$el.scrollWidth / 2;
    if(th.list.length>2){
      th.clienWidth=Number(th.$el.scrollWidth)/4+'px';
    }
    let i = 0.8;
    let g = 0;
    // th.timer= setInterval(() => {
    //   g = g + i;
    //   if (g >= ww) {
    //     g = 0;
    //     // html1.innerHTML = html2.innerHTML;
    //   }
    //   th.$el.scrollLeft = g;
    // },15);
    th.overFlog=th.list.length;
    th.timer=th.getInterVal();
    if(th.list.length>1){
        // clearInterval(t)
    }else{
        clearInterval(th.timer)
    }
  },
  methods:{
    getInterVal(){
      let th=this;
      clearInterval(th.timer)
      let w = th.$el.scrollLeft;
      let ww = th.$el.scrollWidth / 2;
      let i = 0.8;
      let g = 0;
      let t= setInterval(() => {
        g = g + i;
        if (g >= ww) {
          g = 0;
          // html1.innerHTML = html2.innerHTML;
        }
        th.$el.scrollLeft = g;
      },15);
      return t;
    },
    emitShow(item){
       let th=this;
       th.$emit("changed",item);
    },
  },
  beforeDestroy() {
      let th=this;
      clearInterval(th.timer)
  },
  watch:{
    list(value,old){
      let th=this;
      if(value.length!=old.length){
        if(value.length>3){
          clearInterval(th.timer)
          th.clienWidth=Number(th.$el.scrollWidth/3)*0.9+'px';
          th.getInterVal();
        }
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.aa {
  width:90%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  > div {
    display: inline-block;
  }
}
.active_name {
  background-color: #77b741;
  width: 80%;
  line-height: 70px;
  border-radius: 30px;
  color: #fff !important;
  font-size: 20px;
}
.painter-name_box{
  // display: inline-block;
  // width: 100%;
}
.tag_patientName {
  display: inline-block;
  font-size: 46px;
  // margin-left:5px;
  label{
    display: inline-block;
    // width:15px;
  }
}
.gh_active_name{
    color:#ff5757
  }
</style>